<template>
  <div class="reviewed">
    <div class="sticky left-0 right-0 top-0 z-9 h-full bg-hex-ffffff">
      <div class="relative">
        <image class="pointer-events-none absolute left-0 right-0 top-0 w-full"
               :src="`${cdnUrl}/imgs/detail/bg.png${imgVersion}`" mode="aspectFill" />
        <div class="z-999 flex items-center px-20rpx" :style="{ paddingTop: `${searchBarTop}px` }" @click.stop="goback">
          <uni-icons type="back" size="28" />
          <text class="text-36rpx font-600">已评论</text>
        </div>
      </div>
    </div>
    <div class="mt-48rpx p-32rpx">
      <div v-for="item in data" :key="item.id" class="item mb-32rpx">
        <div class="flex items-center justify-between">
          <span class="text-24rpx text-hex-999">{{ item.startTimer }}</span>
          <div class="flex items-center">
            <image class="h-32rpx w-32rpx"
                   :src="iscommentLevel(item).image" mode="aspectFill" />
            <span class="ml-10rpx text-24rpx" :class="[iscommentLevel(item).styles]">{{ iscommentLevel(item).text }}</span>
          </div>
        </div>
        <span class="mt-24rpx text-28rpx text-hex-262626">{{ item.content }}</span>
        <div class="mt-24rpx h-104rpx flex">
          <div class="mr-16rpx h-100% w-104rpx rounded-16rpx bg-hex-f5f5f5" />
          <div class="flex-1 bg-hex-f5f5f5 p-16rpx">
            <div class="text-24rpx font-600 text-hex-333">{{ item.shopDescribe }}</div>
            <div class="mt-4rpx text-24rpx text-hex-999">{{ item.shopModel }}</div>
          </div>
        </div>
        <div class="mt-16rpx flex items-center justify-between">
          <div>
            <div v-if="item.isExamine" class="border-2rpx border-hex-e499c2 rounded-8rpx border-solid px-10rpx text-20rpx leading-32rpx text-hex-E499C2">审核中</div>
          </div>
          <image
            :src="`${cdnUrl}/svgicons/search/del.svg${imgVersion}`"
            mode="scaleToFill"
            class="h-40rpx w-40rpx"
            @click="del(item.id)"
          />
        </div>
      </div>
    </div>
    <div><confirm ref="confirmRef" /></div>
  </div>
</template>

<script lang='ts' setup>
import { useUserStore } from '@/stores/user'

let userInfo: any = useUserStore()
let topHight = $ref(0)
let confirmRef: any = $ref('')
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
let data = $ref([{
  id: 1,
  startTimer: '2023-7-1',
  commentLevel: 1,
  content: '评论内容',
  shopDescribe: '商品描述',
  shopModel: '大杯-少冰-少糖',
  isExamine: false,
  shopImage: '',
}])
//判断好评、中评、差评
const iscommentLevel = (item) => {
  let res = { image: `${cdnUrl}/imgs/mine/my_slices/haopin.png${imgVersion}`, text: '好评', styles: 'text-hex-D4392F' }
  if (item.commentLevel === 1) {
    res.image = `${cdnUrl}/imgs/mine/my_slices/zhongping.png${imgVersion}`
    res.text = '中评'
    res.styles = 'text-hex-E89C43'
  } else if (item.commentLevel === 2) {
    res.image = `${cdnUrl}/imgs/mine/my_slices/bad.png${imgVersion}`
    res.text = '差评'
    res.styles = 'text-hex-333'
  }
  return res
}

// 删除评价接口
const delUserEvaluation = async (id) => {
  const reqData = {
    method: 'post',
    data: {
      'productEvaluationId': id,
    },
    headers: {
      AppType: 2,
      UserId: userInfo.user.id,
    },
  }
  const { status, data, error } = await Fetch('', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  if (data.code === 0) {
    uni.showToast({
      title: '删除成功',
      icon: 'none',
      duration: 2000,
    })

  }
}
//删除评论
const del = (id) => {
  confirmRef.showConfirm('确定删除这条评论吗?').then(res => {
    if (res) {
      delUserEvaluation(id)
    }
  })
}
let searchBarTop: any = $ref('24')
let rightBar: any = $ref(0)
onLoad(() => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  rightBar = menuButtonInfo.width

  // #endif
})
</script>

<style lang='scss'>
.reviewed{
  .item{
    position: relative;

    & :not(:last-child)::after {
      content: '';
      position: absolute;
      bottom: -32rpx;
      left: 0;
      width: 100%;
      height: 2rpx;
      background-color: #f5f5f5; /* 分割线颜色 */
    }
  }
}
</style>
